<script setup>
	import Taber from "../components/Taber.vue";
	import LastPageBar from "../components/LastPageBar.vue";
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import {
		indexApi
	} from "../API/indexApi"

  	const searchValue = ref('');
  	const currentPage = ref(1);
	const pageSize = ref(10);
	const rightBoxRefs = ref([]);
	const CategoryList = ref([]);
	const allCategoryList = ref([]);
	const router = useRouter();
	const setRightBoxRef = (el, index) => {
		rightBoxRefs.value[index] = el;
	};
	const getMallCategory = () => {
		indexApi.getMallCategory({
      	'name':searchValue.value,
    }).then((res) => {
			console.log(res);
			CategoryList.value = res.data;
		});
	};
	
	const getMallGoodsList = () => {
		indexApi.getMallGoodsList({
      	'name':'',
		'user_id': '',
		'page':currentPage.value
    }).then((res) => {
			allCategoryList.value = res.data;
			console.log(allCategoryList.value.list);
		});
	};
	const switcPagination =()=>{
		getMallGoodsList();
	}
	function handleClick(index) {
		console.log(123);
		currentIndex.value = index;

		// 点击后让对应的右侧块滚动到视图中
		if (rightBoxRefs.value[index]) {
			rightBoxRefs.value[index].scrollIntoView({
				behavior: "smooth", // 平滑滚动
				block: "center", // 滚动到顶部对齐
			});
		}
	}

	function routerClick() {
		router.push({
			path: "/details"
		});
	}
  const searchChange  = (e) => {
    searchValue.value = e
    getMallCategory();
	};
	onMounted(() => {
		getMallCategory();
		getMallGoodsList();
		// 在这里执行你需要的逻辑，例如获取数据
	});
</script>

<template>
	<div class="app">
		<div class="taberTop">
			<Taber> </Taber>
		</div>
		<!-- <div class="session">
      <p>
        <img
          src="https://pic.haotaotao.store/image/5593d59174b3383767803ff77b60db4b.png"
          alt="发财发财.png"
          title="发财发财.png"
          style="width: 100%"
        />
        跨境2FA工具[<a href="https://2fa.run">2fa.run</a>]营销资源导航[<a
          href="https://navs.one"
          >navs.one</a
        >]临时邮箱[<a href="https://zhimail.xyz">zhimail.xyz</a>]<br />
        购买前必须阅读[<a href="https://haotaotao.store/post/63">网站声明</a
        >][<a href="https://haotaotao.store/post/66">注意事项</a>][<a
          href="https://haotaotao.store/post/69"
          >减少封号方法</a
        >][<a href="https://haotaotao.store/post/67">缓存登录教程</a>][<a
          href="https://2fa.run/note/dv1ryd12229"
          >风险商品停售说明</a
        >]。联系客服请使用QQ或者TG(点击帮助中心查看联系方式)。反馈问题时必须发订单号、问题截图(或文字说明问题)，反馈不准确或无问题描述的消息会直接忽略。请注意阅读商品详情的内容，如果未少量测试直接批量购买，导致大量账户出现异常的不予售后。FB老号盗号情况泛滥，强烈建议所有账户养号3到5天就修改密码。标题写有【多品类】的产品，需要点击进入产品详情页选择品类购买。【因为Facebook平台安全策略调整，现在制作时都没办法直接删除原号邮箱！购买老号时请少量测试，如果无法接受请谨慎下单！】【未开启2FA的Facebook账号，登录时对网络要求极高，新手请勿下单，客服检测OK的账号是不退不换的】<img
          src="https://pic.haotaotao.store/image/cebaa173e4aaefd4f40699f1ef7bdd76.png"
          alt="微软邮箱.png"
          title="微软邮箱.png"
          style="width: 100%"
        />
        <img
          src="https://pic.haotaotao.store/image/578f5f91a517dbfdd943d84802850e4d.png"
          alt="新手必看注意事项.png"
          title="新手必看注意事项.png"
          style="width: 100%"
        />
        再次提醒：所有老账号，购买回去必须及时修改安全信息，老号都是有被盗走的风险！不了解或无法接受请勿下单。
      </p>
    </div> -->
		<div class="container">
			<div>
				<div class="containerL">
					<div class="search">
						<van-search v-model="searchValue" placeholder="请输入搜索关键词" @update:model-value="searchChange"/>
					</div>
					<div>
						<div class="nav" v-for="(item, index) in CategoryList.list" :key="index"
							@click="handleClick(index)">
							<div class="pic">
								<img src="https://pic.haotaotao.store/image/bd5ba6f23955d381cbb2d16ab3c416ef.png"
									style="width: 22px; height: 22px" />
							</div>
							<div class="goods">
								<div class="goodsName">
									<span class="text_ellipsis"
										style="font-size: 13px;text-align: start;">{{ item.name }}</span>
								</div>
								<div class="goodsNum">
									<span>{{ item.goods_count }} 个商户</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<div class="containerR" style="margin-top: 20px"
					:ref="(el) => setRightBoxRef(el, i - 1)">
					<div class="details" @click="routerClick" v-for="(item, i) in allCategoryList.list" :index = 'i'>
						<div class="detailsImg">
							<img  :src="item.slider_image && item.slider_image.length > 0 ? item.slider_image[0] : 'https://pic.haotaotao.store/image/e0d01c9e2f81a6708e0588fd3689d91f.png'" 
								style="width: 60px; height: 60px" />
						</div>
						<div>
							<div class="detailsN">
								<span style="font-weight: bold">{{ item.name?item.name:'商家未设置名字' }}</span>
								<!-- <div style="overflow: hidden">
									<div v-html="item.content"></div>
								</div> -->
							</div>
							
							<div class="goodsDetails">
								<div>
									<span style="font-weight: bold; color: #ff7f3e">{{ item.price }}</span><span
										style="color: #999"> 金币</span>
								</div>
								<div class="line">|</div>
								<div style="color: #2080f0;font-size: 12px;padding: 1px 10px;border-radius: 5px;" >
									{{item.status?'自动发货':'停止发货'}}
								</div>
								<div class="line">|</div>
								<span style="color: #999">会员价：</span><span style="color: #ff7f3e">{{item.proxy_price_add}}</span>
							</div>
						</div>
					</div> 
					<van-pagination style="width: 100%;padding-top: 24px;"  v-model="currentPage"
							:total-items="allCategoryList.total" :items-per-page="pageSize" mode="simple" @change="switcPagination" />
				</div>
			</div>
		</div>
		<div>
			<LastPageBar> </LastPageBar>
		</div>
	</div>
</template>
<style scoped>
	body {
		background-color: #e8d5ec;
	}
	.text_ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		width: 100px;
		/* 根据实际需求调整 */
	}

	.line {
		width: 17px;
		height: 18px;
		color: rgb(239, 239, 245);
		text-align: center;
	}

	.detailsImg {
		width: 60px;
		height: 64px;
		background-color: rgb(242, 242, 242);
		border-radius: 10px;
		margin-right: 15px;
	}

	.title {
		padding: 8px 10px;
		font-size: 13px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goodsDetails {
		display: flex;
		padding-top: 12px;
	}

	.details {
		display: flex;
		padding: 10px;
		border-top: 1px solid rgb(228, 227, 227);
	}

	.goods {
		display: flex;
		margin-left: 10px;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 12px;
	}

	.goodsNum {
		background-color: rgb(231, 245, 238);
		padding: 1px 8px;
		border-radius: 5px;
		color: green;
	}

	.nav {
		padding: 10px 20px;
		display: flex;
		/* align-items: flex-end; */
		/* width: 100%; */
		font-size: 13px;
		box-sizing: border-box;
		text-align: center;
		border-top: 1px solid rgb(228, 227, 227);
	}

	.nav::before {
		width: 10px;
		height: 10px;
		background-color: red;
	}

	/* img {
  width: 22px;
  height: 22px;
} */
	.search {
		padding: 10px;
		height: 50px;
		/* width: 100%; */
		/* text-align: center; */
		line-height: 40px;
		display: flex;
		justify-content: center;
		/* box-sizing: border-box;	 */
	}

	input {
		padding: 0 10px;
		width: 100%;
		/* box-sizing: border-box */
	}

	.containerL {
		background-color: #fff;
		box-sizing: border-box;
		margin-top: 10px;
		width: 295px;
		top: 10px;
		position: sticky;
	}

	.containerR {
		margin-left: 10px;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #fff;
		font-size: 13px;
		width: 695px;
	}

	.session {
		margin: 0 auto;
		margin-top: 10px;
		padding: 8px 10px;
		width: 1000px;
		height: 480px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.container {
		margin: 0 auto;
		display: flex;
		width: 1000px;
		/* margin-top: 10px; */
		/* padding: 8px 10px; */
		/* box-sizing: border-box; */
		/* width: 65%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center; */
	}
</style>